<template>
  <div>
    <div>
      <el-form>
        <el-row>
          <el-col :span="4">
            <el-form-item label="">
              <span style="margin-left: 10px;font-size:12px;color:#606266;"><b>教师姓名</b></span>
              <el-input style="width:180px;margin-left:10px;" v-model="seachForm.teacherName" placeholder="请输入教师姓名" :maxlength="20" show-word-limit>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="">
              <span style="margin-left: 10px;font-size:12px;color:#606266;"><b>手机号</b></span>
              <el-input style="width:180px;margin-left:10px" v-model="seachForm.phone" placeholder="请输入手机号" :maxlength="11" show-word-limit>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="">
              <span style="margin-left: 10px;font-size:12px;color:#606266;"><b>学历</b></span>
              <el-select style="width: 140px;margin-left:10px" v-model="seachForm.educationId" placeholder="请选择学历">
                <el-option v-for="item in dictData" :key="item.dictName" :label="item.dictName" :value="item.dictName">                   
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-button style="width:70px" type="primary" size="mini" @click="selectTeacher">搜索</el-button>
            <el-button style="width:70px;margin-left:10px" size="mini" plain @click="seachForm={}">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-row>
      <el-col :span="4">
        <el-button @click="openAdd()" type="primary" plain style="margin-left:10px">添加教师</el-button>
      </el-col>
    </el-row>
    <div style="background:#fff;width:100%;height:100%;margin-top:10px">
      <!-- 全查 -->
      <el-table :data="tableData" style="width: 100%; margin-top: 10px; margin-left: 15px" @selection-change="handleSelectionChange" :header-cell-class-name="'headerBg'">

        <el-table-column type="selection" width="55">
        </el-table-column>
        <!-- <el-table-column prop="id" label="id" align="center">
        </el-table-column> -->
        <el-table-column prop="teacherName" label="教师姓名" align="center">
        </el-table-column>
        <el-table-column prop="educationId" label="教师学历" align="center">
        </el-table-column>
        <el-table-column prop="seniority" label="教师工龄" align="center">
        </el-table-column>
        <el-table-column prop="address" label="教师地址" align="center">
        </el-table-column>
        <el-table-column prop="phone" label="手机号" align="center">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" align="center">
        </el-table-column>
        <el-table-column label="教师状态" align="center">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.isDisable == 0" color="#19caad;">启用</el-tag>
            <el-tag type="danger" v-if="scope.row.isDisable == 1">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="350px" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="small" style="background:none;border:0px"><span style="color:#409EFF;" @click="openInfo(scope.row)"><i class="el-icon-share"></i>详情</span></el-button>
            <el-button type="primary" size="small" style="background:none;border:0px"><span style="color:#409EFF;" @click="openUpdate(scope.row)"><i class="el-icon-edit"></i>修改</span></el-button>
            <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='我再想想' icon="el-icon-info" icon-color="red" title="您确定删除吗？" @confirm="delTeacher(scope.row.id)">
              <el-button type="primary" size="small" slot="reference" style="background:none;border:0px"><span style="color:#409EFF;"><i class="el-icon-delete"></i>删除</span></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination :page-sizes="[5, 10, 15, 20]" :page-size="pages.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pages.total" background :current-page.sync="pages.pageNum"
        @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
      <el-dialog :visible.sync="addButton" width="40%" style="text-align: left" :before-close="handleClose">
        <div slot="title" class="header-title" style="">
          教师信息
        </div>
        <el-form stripe style="width: 100%; text-align: left;letter-spacing: 1px;" :model="addForm" ref="addForm" :rules="rules">
          <el-row>
            <el-col :span="10">
              <el-form-item prop="teacherName">
                <span style="font-weight: 900; color: rgb(93, 142, 255)">|</span>
                <span style="margin-left: 10px">教师姓名</span>
                <el-input style="width: 65%; margin-left: 20px" v-model="addForm.teacherName" placeholder="请输入教师姓名" :maxlength="20" show-word-limit></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="1">&nbsp;</el-col>
            <el-col :span="10">
              <el-form-item prop="gender">
                <span style="font-weight: 900; color: rgb(93, 142, 255)">|</span>
                <span style="margin-left: 10px">性　　别</span>
                <el-select style="width: 65%; margin-left: 20px" v-model="addForm.gender" placeholder="请选择性别">
                  <el-option v-for="item in grenderData" :key="item.name" :label="item.name" :value="item.id">
                                           
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item prop="email">
                <span style="font-weight: 900; color: rgb(93, 142, 255)">|</span>
                <span style="margin-left: 10px">邮　　箱</span>
                <el-input style="width: 65%; margin-left: 20px" v-model="addForm.email" placeholder="请输入邮箱"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="1">&nbsp;</el-col>
            <el-col :span="10">
              <el-form-item prop="phone">
                <span style="font-weight: 900; color: rgb(93, 142, 255)">|</span>
                <span style="margin-left: 10px">电　　话</span>
                <el-input v-model="addForm.phone" placeholder="请输入手机号" :maxlength="11" show-word-limit clearable prefix-icon='el-icon-mobile' style="width: 65%; margin-left: 20px"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item prop="password" v-if="addForm.id==null || addForm.id==0">
            <span style="font-weight: 900; color: rgb(93, 142, 255)">|</span>
            <span style="margin-left: 10px">密　　码</span><el-input show-password style="width: 27%; margin-left: 20px" type="password" v-model="addForm.password" placeholder="请输入密码" :maxlength="18"
              show-word-limit></el-input>
          </el-form-item>
          <el-row>

            <el-col :span="10">
              <el-form-item prop="educationId">
                <span style="font-weight: 900; color: rgb(93, 142, 255)">|</span>
                <span style="margin-left: 10px">学　　历</span>
                <el-select style="width: 65%; margin-left: 20px" v-model="addForm.educationId" placeholder="请选择学历">
                  <el-option v-for="item in dictData" :key="item.dictName" :label="item.dictName" :value="item.dictName">                   
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="1">&nbsp;</el-col>
            <el-col :span="10">
              <el-form-item prop="seniority">
                <span style="font-weight: 900; color: rgb(93, 142, 255)">|</span>
                <span style="margin-left: 10px" v-if="addForm.seniority!=null&&addForm.seniority!=''">工　　龄</span>
                <span style="margin-left: 10px" v-else>任课时间</span>
                <el-input v-model="addForm.seniority" placeholder="请输入工龄" style="width: 65%; margin-left: 20px" v-if="addForm.seniority!=null&&addForm.seniority!=''"></el-input>
                <el-date-picker v-model="value1" v-else type="month" placeholder="选择月" @change="calculateMonthDifference" style="width:65%;margin-left:20px"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item prop="address">
            <span style="font-weight: 900; color: rgb(93, 142, 255)">|</span>
            <span style="margin-left: 10px">地　　址</span>
            <el-input style="width:73%; margin-left: 20px" v-model="addForm.address" placeholder="请输入详细地址" maxlength="50"></el-input>
          </el-form-item>
          <el-form-item prop="teacherInfo">
            <span style="font-weight: 900; color: rgb(93, 142, 255)">|</span>
            <span style="margin-left: 10px">教师介绍</span>
            <el-input style="width:73%; margin-left: 20px" type="textarea" v-model="addForm.teacherInfo" placeholder="请输入教师介绍" maxlength="100" show-word-limit> </el-input>
          </el-form-item>
          <el-form-item>
            <span style="font-weight: 900; color: rgb(93, 142, 255)">|</span>
            <span style="margin-left: 10px">教师照片</span>
            <el-upload style=" margin-left: 13%" action="123123123" list-type="picture-card" class="upload-demo" :before-upload="beforeAvatarUpload">
              <img height="148" v-if="teacherImg" :src="teacherImg" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <span style="font-weight: 900; color: rgb(93, 142, 255)">|</span>
            <span style="margin-left: 10px">学历证明</span>
            <el-upload style=" margin-left: 13%" action="123123123" list-type="picture-card" class="upload-demo" :before-upload="beforeEducationUpload">
              <img height="148" v-if="educationImg" :src="educationImg" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <div style="height:10px;margin-right: 20px;">
          <div style="float:right;">
            <el-button style="background-color: rgb(234, 244, 255); color: rgb(96, 169, 255)" @click="addCourse()">确 定</el-button>
            <el-button @click="addButton = false" style="background-color: rgb(234, 244, 255); color: rgb(96, 169, 255)">取 消</el-button>
          </div>
        </div>
      </el-dialog>
      <!-- 教师信息详细 -->
      <el-dialog :visible.sync="infoButton" width="40%" style="text-align: left" :before-close="infoClose">
        <div slot="header" class="clearfix">
          <span>教师信息</span>
        </div>
        <div class="text item" style="width:100%">

          <el-form stripe style="width: 100%; text-align: left;letter-spacing: 1px;" :model="infoForm">
            <el-form-item>
              <div style="float:left">
                <span style="font-weight: 900; color: rgb(93, 142, 255)">|</span>
                <span style="margin-left: 10px;">教师照片</span>
              </div>
              <div style="float:left">
                <el-image style=" height: 148px;margin-left: 20px;" :src="'http://101.43.223.224:8765/image/getImageById?id=' + infoForm.teacherImg" :preview-src-list="srcList">
                </el-image>
              </div>
            </el-form-item>
            <el-row>
              <el-col :span="10">
                <el-form-item prop="teacherName">
                  <span style="font-weight: 900; color: rgb(93, 142, 255)">|</span>
                  <span style="margin-left: 10px">教师姓名</span>
                  <el-input style="width: 65%; margin-left: 20px" v-model="infoForm.teacherName" :disabled="true"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="1">&nbsp;</el-col>
              <el-col :span="10">
                <el-form-item prop="gender">
                  <span style="font-weight: 900; color: rgb(93, 142, 255)">|</span>
                  <span style="margin-left: 10px">性　　别</span>
                  <el-input style="width: 65%; margin-left: 20px" v-model="infoForm.gender" :disabled="true"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item prop="email">
                  <span style="font-weight: 900; color: rgb(93, 142, 255)">|</span>
                  <span style="margin-left: 10px">邮　　箱</span>
                  <el-input style="width: 65%; margin-left: 20px" v-model="infoForm.email" :disabled="true"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="1">&nbsp;</el-col>
              <el-col :span="10">
                <el-form-item prop="phone">
                  <span style="font-weight: 900; color: rgb(93, 142, 255)">|</span>
                  <span style="margin-left: 10px">电　　话</span>
                  <el-input v-model="infoForm.phone" style="width: 65%; margin-left: 20px" :disabled="true"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="10">
                <el-form-item prop="educationId">
                  <span style="font-weight: 900; color: rgb(93, 142, 255)">|</span>
                  <span style="margin-left: 10px">学　　历</span>
                  <el-input v-model="infoForm.educationId" style="width: 65%; margin-left: 20px" :disabled="true"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="1">&nbsp;</el-col>
              <el-col :span="10">
                <el-form-item prop="seniority">
                  <span style="font-weight: 900; color: rgb(93, 142, 255)">|</span>
                  <span style="margin-left: 10px">工　　龄</span>
                  <el-input v-model="infoForm.seniority" style="width: 65%; margin-left: 20px" :disabled="true"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item prop="address">
              <span style="font-weight: 900; color: rgb(93, 142, 255)">|</span>
              <span style="margin-left: 10px">地　　址</span>
              <el-input style="width:73%; margin-left: 20px" v-model="infoForm.address" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item prop="teacherInfo">
              <span style="font-weight: 900; color: rgb(93, 142, 255)">|</span>
              <span style="margin-left: 10px">教师介绍</span>
              <el-input style="width:73%; margin-left: 20px" v-model="infoForm.teacherInfo" :disabled="true"> </el-input>
            </el-form-item>
            <el-form-item>
              <div style="float:left">
                <span style="font-weight: 900; color: rgb(93, 142, 255)">|</span>
                <span style="margin-left: 10px;">学历证明</span>
              </div>
              <div style="float:left">
                <el-image style=" height: 148px;margin-left: 20px;" :src="'http://101.43.223.224:8765/image/getImageById?id=' + infoForm.educationImg" :preview-src-list="srcList">
                </el-image>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Teacher",
  components: {},
  data() {
    return {
      // 教师数组
      tableData: [],
      // 菜单数组
      dictData: [],
      srcList: [],
      value1: null, // 存储选中的日期范围
      monthDifference: null, // 存储月份差距
      yearDifference: null,
      grenderData: [
        {
          id: 1,
          name: "男",
        },
        {
          id: 2,
          name: "女",
        },
      ],
      aa: "",
      ids: [],
      // 图片回显
      teacherImg: "",
      // 图片回显
      educationImg: "",
      //回显图片数组
      imageTable: [],
      //添加时赋值
      imgTeacher: "",

      seachForm: {},
      //添加时赋值
      imgEducation: "",
      pages: {
        // 当前页
        pageNum: 1,
        // 每页几条数据
        pageSize: 5,
      },
      addForm: {},
      rules: {
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          {
            pattern: /^1(3|4|5|7|8|9)\d{9}$/,
            message: "手机号格式错误",
            trigger: "blur",
          },
        ],
        teacherName: [
          { required: true, message: "请输入教师姓名", trigger: "blur" },
        ],
        gender: [{ required: true, message: "请选择性别", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        educationId: [
          { required: true, message: "请选择学历", trigger: "blur" },
        ],
        teacherInfo: [
          { required: true, message: "请输入教师介绍", trigger: "blur" },
        ],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
        email: [
          {
            required: true,
            message: "请输入邮箱",
            trigger: "blur",
          },
          {
            pattern: /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/,
            message: "邮箱格式错误",
            trigger: "blur",
          },
        ],
      },
      infoForm: {},
      addButton: false,
      infoButton: false,
      isEmpty: false,
    };
  },
  mounted() {
    this.selectTeacher();
    this.selectDict();
  },
  methods: {
    // 打开个人信息
    openInfo(row) {
      this.infoForm = row;
      this.infoButton = true;
      if (this.infoForm.gender == "1") {
        this.infoForm.gender = "男";
      }
      if (this.infoForm.gender == "2") {
        this.infoForm.gender = "女";
      }
      // 图片回显
      this.teacherImg =
        "http://101.43.223.224:8765/image/getImageById?id=" + row.teacherImg;
      this.srcList.push(this.teacherImg);
      // 图片回显
      this.educationImg =
        "http://101.43.223.224:8765/image/getImageById?id=" + row.educationImg;
      this.srcList.push(this.educationImg);
    },
    //删除教师
    delTeacher(id) {
      this.$axios
        .get("/teacher/delTeacher", {
          params: {
            id: id,
          },
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.selectTeacher();
            this.$message.success("删除成功");
          }
        })
        .catch((err) => {});
    },
    //计算年
    calculateMonthDifference() {
      const selectedDate = new Date(this.value1);
      const currentDate = new Date();

      const yearDifference =
        currentDate.getFullYear() - selectedDate.getFullYear();
      const monthDifference = currentDate.getMonth() - selectedDate.getMonth();

      if (yearDifference < 1) {
        // 不足一年，计算月差
        this.addForm.seniority = monthDifference + "月";
      } else {
        // 计算年差
        this.addForm.seniority = yearDifference + "年";
      }
    },
    // 打开添加教师信息弹窗
    openAdd() {
      this.addButton = true;
      this.value1 = null;
    },
    // 打开修改教师信息弹窗
    openUpdate(row) {
      this.selectById(row);
      this.addButton = true;
      this.value1 = null;

      // 图片回显
      this.teacherImg =
        "http://101.43.223.224:8765/image/getImageById?id=" + row.teacherImg;
      // 图片回显
      this.educationImg =
        "http://101.43.223.224:8765/image/getImageById?id=" + row.educationImg;
    },
    //单查教师
    selectById(row) {
      this.$axios
        .get("/teacher/selectTeacherById", {
          params: {
            id: row.id,
          },
        })
        .then((res) => {
          if ((res.code = 200)) {
            //教师信息表格赋值
            this.addForm = res.data.data;
            if (this.addForm.gender === "1") {
              this.addForm.gender = "男";
            }
            if (this.addForm.gender === "2") {
              this.addForm.gender = "女";
            }
          }
        })
        .catch((err) => {});
    },
    // 打开教师详细页面
    openXiangxi(row) {
      // 跳转并传递参数
      this.$router.push({
        name: "teacherInfo",
        params: {
          id: row.id,
        },
      });
    },
    // 查询教师
    selectTeacher() {
      this.$axios
        .get("/teacher/selectTeacher", {
          params: {
            pageNum: this.pages.pageNum,
            pageSize: this.pages.pageSize,
            teacherName: this.seachForm.teacherName,
            educationId: this.seachForm.educationId,
            phone: this.seachForm.phone,
          },
        })
        .then((res) => {
          if ((res.code = 200)) {
            //教师信息表格赋值
            this.tableData = res.data.data.content;
            this.pages.total = res.data.data.totalSize;
          }
        })
        .catch((err) => {});
    },
    //查询菜单
    selectDict() {
      this.$axios
        .get("/teacher/selectEducationDict")
        .then((res) => {
          if ((res.code = 200)) {
            //教师信息表格赋值
            this.dictData = res.data.data;
          }
        })
        .catch((err) => {});
    },

    //关闭对话框
    handleClose(done) {
      // 在这里编写您的关闭逻辑
      // 例如执行某个操作后再关闭对话框
      this.addForm = {};

      // 图片回显
      this.teacherImg = "";
      // 图片回显
      this.educationImg = "";
      // 调用 done() 方法来关闭对话框
      this.addButton = false;
    },
    infoClose(done) {
      // 图片回显
      this.teacherImg = "";
      // 图片回显
      this.educationImg = "";
      // 调用 done() 方法来关闭对话框
      this.infoButton = false;
    },
    addCourse() {
      this.$refs["addForm"].validate((valid) => {
        if (valid) {
          const formData = new FormData();
          
          // 教师图片
          if (this.imgTeacher) {
            formData.set("file1", this.imgTeacher, this.imgTeacher.name);
          }

          // 学历证明图片
          if (this.imgEducation) {
            formData.set("file2", this.imgEducation, this.imgEducation.name);
          }
          for (const key in this.addForm) {
            formData.set(key, this.addForm[key]);
            formData.get(key);
          }
          if (formData.has("id")) {
            this.$axios
              .post("/teacher/upTeacher", formData)
              .then((res) => {
                if (res.data.code == 200) {
                  this.addButton = false;
                  this.$message.success("修改成功");
                  // 图片回显
                  this.teacherImg = "";
                  // 图片回显
                  this.educationImg = "";
                  //清空表单
                  this.addForm = {};
                  // 关闭窗口
                  this.value1 = null;

                  //刷新
                  this.selectTeacher();
                } else {
                  this.$message.error("warning", res.data.code);
                }
              })
              .catch((err) => {
                console.log(err);
              });
          } else {
            this.$axios
              .post("/teacher/addTeacher", formData)
              .then((res) => {
                if (res.data.flag) {
                  this.$message.success("添加成功");
                  // 图片回显
                  this.teacherImg = "";
                  // 图片回显
                  this.educationImg = "";
                  //清空表单
                  this.addForm = {};
                  // 关闭窗口
                  this.addButton = false;
                  //刷新
                  this.selectTeacher();
                  this.value1 = null;
                } else {
                  this.$message.error("warning", res.data.code);
                }
              })
              .catch((err) => {
                console.log(err);
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 图片格式验证
    beforeAvatarUpload(file) {
      //上传图片格式
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$message.error("上传图片只能是JPG/PNG格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过2MB!");
        return false;
      }

      //赋值
      this.imgTeacher = file;
      this.teacherImg = URL.createObjectURL(file);
      //isJPG && isLt2M 自动提交 false 是点击确定后提交
      return false;
    },
    beforeEducationUpload(file) {
      //上传图片格式
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$message.error("上传图片只能是JPG/PNG格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过2MB!");
        return false;
      }
      //赋值
      this.imgEducation = file;
      this.educationImg = URL.createObjectURL(file);
      //isJPG && isLt2M 自动提交 false 是点击确定后提交
      return false;
    },
    handleSelectionChange(val) {
      this.ids = val.map((v) => v.id);
    },
    // 分页
    handleSizeChange(val) {
      this.pages.pageSize = val;
      this.selectTeacher();
    },
    handleCurrentChange(val) {
      this.pages.pageNum = val;
      this.selectTeacher();
    },
    handleAvatarSuccess() {},
  },
};
</script>
<style>
.headerBg {
  background: #f8f8f9 !important;
}
</style>
